@charset "UTF-8";
html {
  height: 100%;
}

html body {
  height: 100%;
  background: whitesmoke;
}

div {
  box-sizing: border-box;
}

header {
  height: 100px;
  line-height: 100px;
  background-color: #fff;
}

header .header-title {
  float: left;
  height: 100px;
}

header .header-title h1, header .header-title p {
  display: inline-block;
  margin-left: 20px;
}

hr {
  width: 100%;
  height: 2px;
  background-color: #ff4800;
}

.cart-warp {
  margin: 20px auto;
}

.cart-warp .list-head {
  display: flex;
  height: 70px;
  line-height: 70px;
  font-size: 14px;
  background-color: white;
}

.cart-warp .list-head .t-checkall {
  padding-left: 40px;
}

.cart-warp .item-box {
  display: flex;
  height: 120px;
  line-height: 120px;
  border-top: 1px solid #eaeaea;
  background-color: white;
}

.cart-warp .item-box .t-check {
  padding-left: 25px;
}

.cart-warp .item-box .t-check label {
  top: 50px;
  left: 25px;
}

.cart-warp .item-box .car-img img {
  width: 80px;
  height: 80px;
}

.cart-warp .item-box .car-num .change-goods-num {
  display: flex;
  width: 150px;
  height: 38px;
  line-height: 38px;
  margin: 41px auto;
  border: 1px solid #e0e0e0;
}

.cart-warp .item-box .car-num .change-goods-num a {
  display: block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 24px;
  transition: all .3s;
}

.cart-warp .item-box .car-num .change-goods-num a:nth-child(1) {
  float: left;
}

.cart-warp .item-box .car-num .change-goods-num a:nth-child(3) {
  float: right;
}

.cart-warp .item-box .car-num .change-goods-num a:hover {
  background-color: #e0e0e0;
}

/*.cart-warp .item-box .car-num .change-goods-num input {*/
/*  width: 74px;*/
/*  height: 100%;*/
/*  border: none;*/
/*  outline: none;*/
/*  text-align: center;*/
/*  font-size: 16px;*/
/*  box-sizing: border-box;*/
/*  vertical-align: top;*/
/*}*/

.cart-warp .item-box .car-action a {
  display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin: 50px auto;
  border-radius: 12px;
  color: #757575;
  font-size: 16px;
  transition: all .3s;
}

.cart-warp .item-box .car-action a:hover {
  color: #fff;
  background-color: #e53935;
}

.cart-warp .cart-bar {
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  background-color: #fff;
  font-size: 14px;
}

.cart-warp .cart-bar .operation {
  float: left;
  padding-left: 25px;
}

.cart-warp .cart-bar .operation .amount-sum {
  float: left;
}

.cart-warp .cart-bar .operation .amount-sum em {
  color: #ff4800;
}

.cart-warp .cart-bar .operation a {
  margin-left: 25px;
}

.cart-warp .cart-bar .operation a:hover {
  color: #ff4800;
}

.cart-warp .cart-bar .toolbar-right {
  width: 500px;
  float: right;
  display: flex;
}

.cart-warp .cart-bar .toolbar-right .price-sum, .cart-warp .cart-bar .toolbar-right .btn-area {
  flex: 1;
  height: 50px;
  color: #ff4800;
}

.cart-warp .cart-bar .toolbar-right .price-sum em, .cart-warp .cart-bar .toolbar-right .btn-area em {
  font-size: 30px;
}

.cart-warp .cart-bar .toolbar-right .btn-area {
  color: #fff;
  text-align: center;
  font-size: 18px;
  outline: none;
  border: 0;
  background-color: #ff4800;
}

.cart-warp label {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  position: absolute;
  border: 1px solid #ccc;
  /*改变复选框的边框颜色也可以不要边框*/
  top: 25px;
  left: 25px;
}

.cart-warp input[type=checkbox] {
  /* visibility 属性规定元素是否可见*/
  visibility: hidden;
}

.cart-warp input[type=checkbox]:checked + label:before {
  /*before为伪元素可以在元素之后添加内容*/
  display: block;
  content: "\2714";
  text-align: center;
  font-size: 20px;
  color: #ff4800;
}

.cart-warp .t-checkall, .cart-warp .t-check {
  position: relative;
  width: 110px;
}

.cart-warp .car-img {
  width: 120px;
}

.cart-warp .car-price, .cart-warp .car-num, .cart-warp .car-action {
  width: 150px;
  text-align: center;
}

.cart-warp .car-total {
  width: 200px;
  text-align: center;
}

.cart-warp .car-name {
  flex: 1;
}
